<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
</head>
<body>
<script>
    const xhr = new XMLHttpRequest();
    console.log('created',xhr.readyState);//0
    //open方法用来初始化一个准备发出的请求
    //method 请求的方法名http method GET POST DELETE PUT
    //url 请求的URL，可以是绝对路径，也可以是相对路径
    //async(可选) 默认为true,表示是否进行异步操作，如果为true表示异步，如果为false表示同步
    //如果是异步不会阻塞JS代码继续往下执行，如果是同步的会阻塞代继续执行直到响应回来为止
    xhr.open('POST','http://localhost:8080/users',true);
    console.log('opended',xhr.readyState);//2
    xhr.setRequestHeader('Content-Type','application/json');
    //onreadystatechange 指定事件处理程序，在readyState状态改变的触发
    xhr.onreadystatechange = ()=>{
        console.log('onreadystatechange',xhr.readyState)
        //当readyState状态为4的时候，说明响应已经读取完毕
        if(xhr.readyState === 4){
            //再检查响应的状态码，如果是200的话，
            if(xhr.status >= 200&& xhr.status < 300){
                //就可以通过responseText读取完整的响应体数据了
                console.log(xhr.responseText)
            }
        }
    }
    //send方法用于发送请求到服务器
    //在调用open方法之后就可以调用send方法发送请求了，发送请求的时候可以会携带请求体数据
    xhr.send(JSON.stringify({name:'zhufeng2'}));
</script>
</body>
</html>